<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Copy website</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="layout">	
		<div id="header">
			<div class="nav">
				<p>Start Project</p>
				<ul>
					<li><a href="#services">SERVICES</a></li>
					<li><a href="#portfolio">INFORMATION</a></li>
					<li><a href="#about">ABOUT</a></li>
					<li><a href="#team">TEAM</a></li>
					<li><a href="#contace">CONTACT</a></li>
				</ul>
            </div>
			
			<div class="setWrap">
				<div class="carousel clearfix">
					<ul class="img-ct">
						<li><img src="./img/1.jpg"></a></li>
						<li><img src="./img/2.jpg"></li>
						<li><img src="./img/3.jpg"></li>
						<li><img src="./img/4.jpg"></li>
					</ul>
					<a href="#" class="pre">&#60</a>
					<a href="#" class="next">&#62</a>
					<ul class="link">
						<li class = "active"></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
            
			
			<div class="content">
				<p>welcome to our studio</p>
				<h1>IT'S NICE TO MEET YOU</h1>
				<a href="#">TELL ME MORE</a>
			</div>
		</div>
		

		<div id="services" class="person">
			<h1>SERVICES</h1>
			<p>Lorem ipsum dolor sit amet consectetur.</p>
			<ul>
				<li> 
                  <div>
					<p>&#xe61c</p>
                  </div>
					<p>E-Commerce</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
				</li>
				<li>
                  <div>
					<p>&#xe670</p>
                  </div>
					<p>Web Security</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
				</li>
				<li>
                  <div>
					<p>&#xe62f</p>
                  </div>
					<p>Responsive Design</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
				</li>
			</ul>

		</div>

		<div id="portfolio" class="person">
			<h1>INFORMATION</h1>
			<p>Lorem ipsum dolor sit amet consectetur.</p>
			<div class="wrap">
				<ul class="ct clearfix" >
					<li class="item hidden"></li>
				</ul>
			</div>
			<div class="more">MORE</div>
		</div>
		<div id="about">
			<h1>ABOUT</h1>
			<p>Lorem ipsum dolor sit amet consectetur.</p>
				<ul class="timeline">
					<li>
						<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg" alt="">
						<div class="word">
							<h3>2009-2011</h3>
							<h3>Our Humble Beginnings</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
						</div>
					</li>
					<li>
						<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/2.jpg" alt="">
						<div class="word">
							<h3>MARCH 2011</h3>
							<h3>An Agency is Born</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
						</div>
					</li>
					<li>
						<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/3.jpg" alt="">
						<div class="word">
							<h3>DECEMBER 2012</h3>
							<h3>Transition to Full Service</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
						</div>
					</li>
					<li>
						<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/4.jpg" alt="">
						<div class="word">
							<h3>JULY 2014</h3>
							<h3>Phase Two Expansion</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
						</div>
					</li>
					<li>
						<div class="word">
							<h3>BE PART OF OUR STORY!</h3>
						</div>
					</li>
				</ul>
		</div>

		<div id="team">
			<h3>OUR AMAZING TEAM</h3>
			<p>Lorem ipsum dolor sit amet consectetur.</p>
			<ul class="person">
				<li>
					<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/team/5.jpg" alt="">
					<h3>Kay Garland</h3>
					<p>Lead Designer</p>
					<ul>
						<li><a href="#">&#xe610</a></li>
						<li><a href="#">&#xe60f</a></li>
						<li><a href="#">&#xe638</a></li>
					</ul>
				</li>
				<li>
					<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/team/6.jpg" alt="">
					<h3>Larry Parker</h3>
					<p>Lead Marketer</p>
					<ul>
						<li><a href="#">&#xe610</a></li>
						<li><a href="#">&#xe60f</a></li>
						<li><a href="#">&#xe638</a></li>
					</ul>
				</li>
				<li>
					<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/team/7.jpg" alt="">
					<h3>Diana Pertersen</h3>
					<p>Lead Developer</p>
					<ul>
						<li><a href="#">&#xe610</a></li>
						<li><a href="#">&#xe60f</a></li>
						<li><a href="#">&#xe638</a></li>
					</ul>
				</li>
			</ul>		
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
		</div>
		<div id="brand">
			<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/envato.jpg" alt="">
			<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/designmodo.jpg" alt="">
			<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/themeforest.jpg" alt="">
			<img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/creative-market.jpg" alt="">

		</div>

		<div id="contace">
			<h3>CONTACT US</h3>
			<p>Lorem ipsum dolor sit amet consectetur.</p>
			<div class="row">
				<div class="massage">
					<input type="text" placeholder="YOUR NAME*">
					<input type="text" placeholder="YOUR EMAIL*">
					<input type="text" placeholder="YOUR PHONE*">
				</div>
				<div class="text">
					<textarea name="" id="" cols="70" rows="10" placeholder="YOUR MASSAGE*"></textarea>
				</div>
			</div>
			<a href="#">SEND MESSAGE</a>
		</div>

		<div class="goTopSet">
			<p>GoTop</p>
		</div>
		<footer class="person">
			<p>&copy; 刘圣凯 / 2017-10</p>
			<ul>
				<li><a href="#">&#xe610</a></li>
				<li><a href="#">&#xe60f</a></li>
				<li><a href="#">&#xe638</a></li>
			</ul>
			<div>
				<a href="#">Privacy Policy</a>
				<a href="#">Terms of Use</a>
			</div>

		</footer>
    </div>


    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="./js/all.js"></script>
</body>
</html>